<template>
	<el-form
		ref="loginForm"
		class="login-form"
		status-icon
		:rules="loginRules"
		:model="loginForm"
		label-width="0"
	>
		<img
			ref="logo"
			class="logo"
			:src="logoImage"
			@error="imgError"
			v-if="!showDefaultImage"
		/>
		<img
			ref="defaultLogo"
			src="@/assets/img/logo.png"
			class="logo"
			v-if="showDefaultImage"
		/>

		<el-form-item prop="username">
			<el-input
				v-model="loginForm.username"
				size="small"
				auto-complete="off"
				:placeholder="$t('login.username')"
				@keyup.enter.native="handleLogin"
			>
				<div
					slot="prefix"
					class="input-icon-box flex fx-ai-center fx-jc-center"
				>
					<img class="input-icon" src="@/assets/img/user_icon.png" />
				</div>
			</el-input>
		</el-form-item>
		<el-form-item prop="password">
			<el-input
				v-model="loginForm.password"
				size="small"
				:type="passwordType"
				auto-complete="off"
				:placeholder="$t('login.password')"
				@keyup.enter.native="handleLogin"
			>
				<i
					slot="suffix"
					class="el-icon-view el-input__icon"
					@click="showPassword"
				/>
				<div
					slot="prefix"
					class="input-icon-box flex fx-ai-center fx-jc-center"
				>
					<img class="input-icon" src="@/assets/img/password_icon.png" />
				</div>
			</el-input>
		</el-form-item>
		<el-form-item prop="code">
			<div class="flex fx-ai-center">
				<el-input
					v-model="loginForm.code"
					size="small"
					auto-complete="off"
					maxlength="4"
					:placeholder="$t('login.code')"
					@keyup.enter.native="handleLogin"
				>
					<div
						slot="prefix"
						class="input-icon-box flex fx-ai-center fx-jc-center"
					>
						<img class="input-icon" src="@/assets/img/security_icon.png" />
					</div>
				</el-input>
				<img :src="codeUrl" alt="" @click="getCode" />
			</div>
		</el-form-item>
		<el-form-item style="background:none;">
			<el-button
				type="danger"
				size="small"
				class="login-submit"
				@click.native.prevent="handleLogin"
				>{{ $t('login.submit') }}
			</el-button>
		</el-form-item>
	</el-form>
</template>
<script>
import { getCodeImg } from '@/api/login'
import { mapGetters } from 'vuex'
import { getAuthInfo } from '@/api/system/authInfo'
export default {
	name: 'Userlogin',
	data() {
		return {
			showDefaultImage: false,
			sizeForm: {},
			loginForm: {
				username: '',
				password: '',
				rememberMe: false,
				code: '',
				time: '',
				realKey: '',
			},
			loginRules: {
				username: [
					{ required: true, message: '请输入用户名', trigger: 'blur' },
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					{ min: 6, message: '密码长度最少为6位', trigger: 'blur' },
				],
				code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
			},
			passwordType: 'password',
			codeUrl: '',
		}
	},
	computed: {
		...mapGetters(['tagWel']),
		logoImage() {
			return `${process.env.VUE_APP_BASE_API}/profile/logo/logo.png`
		},
	},
	created() {
		this.getCode()
	},
	mounted() {},
	methods: {
		// 图片加载失败
		imgError() {
			this.showDefaultImage = true
		},
		// TODO:宽限期 预警期
		async getAuthInfo() {
			const { data } = await getAuthInfo()
			this.sizeForm = data

			let diffTime = Date.now() - this.sizeForm.data.$validEndAt
			// 宽限期内
			if (
				diffTime < 0 &&
				-diffTime <= this.sizeForm.data.$extendDays * 86400000
			) {
				setInterval(() => {
					this.$notify({
						title: '授权过期',
						message:
							'系统授权已过期，所有功能已停止，请及时联系厂家或代理商代理',
						position: 'bottom-left',
					})
				}, 30 * 60 * 1000)
				// 毫秒（预警期内）
			} else if (this.sizeForm.data.$preAlarmDays * 86400000 > diffTime >= 0) {
				this.$notify({
					title: '授权过期',
					message: '系统授权已过期，所有功能已停止，请及时联系厂家或代理商代理',
					position: 'bottom-left',
				})
			}
		},
		getCode() {
			getCodeImg().then((res) => {
				this.codeUrl = 'data:image/jpg;base64,' + res.data.img
				this.loginForm.realKey = res.data.realKey
			})
		},
		showPassword() {
			this.passwordType === ''
				? (this.passwordType = 'password')
				: (this.passwordType = '')
		},
		handleLogin() {
			this.$refs.loginForm.validate((valid) => {
				if (valid) {
					this.$store
						.dispatch('LoginByUsername', this.loginForm)
						.then((item) => {
							if (item) {
								this.$message({
									type: 'warning',
									message: item,
								})
							}
							this.$router.push({ path: this.tagWel.value || '/wel/index' })
						})
						.catch(() => {
							this.loginForm.code = ''
							this.loginForm.realKey = ''
							this.getCode()
						})
				}
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.logo {
	width: 18vw;
}

// .el-form-item {
//   background: white;
// }
/deep/ .el-col {
	margin-bottom: 0 !important;
}

.input-icon-box {
	height: 100%;
	width: 26px;

	.input-icon {
		width: 16px;
		height: 16px;
		display: block;
	}
}

.fg-pw {
	margin-top: 20px;
	color: #333;
	font-size: 14px;

	span {
		cursor: pointer;
	}
}

/deep/ .el-input__prefix {
	top: -3px;
}
</style>
